<template>
    <div class="box">
        <ul class="tanxin banner">
            <li><span @click="btn(1);$router.push('/home')" :class="{active:$route.path === '/home'}">推荐</span></li>
            <li><span @click="btn(2);$router.push('/paihang')" :class="{active:$route.path === '/paihang'}">排行榜</span></li>
            <li><span @click="btn(3);$router.push('/gedan')" :class="{active:$route.path === '/gedan'}">歌单</span></li>
            <li><span @click="btn(4);$router.push('/zhubo')" :class="{active:$route.path === '/zhubo'}">主播电台</span></li>
            <li><span @click="btn(5);$router.push('/singer')" :class="{active:$route.path === '/singer'}">歌手</span></li>
            <li><span @click="btn(6);$router.push('/xindie')" :class="{active:$route.path === '/xindie'}">新碟上架</span></li>
        </ul>
    </div>
</template>

<script>
export default {
    data () {
        return {
        }
    },
    methods:{
        btn(num){
            this.$store.commit('unisshow',num)
        },
       
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.active{
    background-color: brown;
}
.box{
    color: white;
    background-color: red;
    height: 35px;
    line-height: 35px;
    li{
        padding: 0 20px;
        font-size: 12px;
        text-align: center;
        line-height: 35px;
        span{
            cursor: pointer;
            padding: 3px 11px;
            border-radius: 20px;
        }
        span:hover{
            background-color: brown;
        }
    }
}
.banner{
    width: 726px;
}
</style>